<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{list-style-type:none;}  
			#star{position:relative;width:100%;margin:5px;height:26px;line-height:26px;margin-bottom: 30px;}  
			#star ul,#star span{float:left;display:inline;height:26px;line-height:26px;}  
			#star ul{margin:0px 5px; padding:0px;}  
			#star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(images/icon.png) no-repeat;}  
			#star .on{background:url(images/star.png) no-repeat;}  
			textarea{
			    width: 400px;
			    height: 32px;
			    padding: 6px 12px;
			    font-size: 14px;
			    line-height: 1.42857143;
			    color: #555;
			    background-color: #fff;
			    border: 1px solid #ccc;
			    border-radius: 4px;
			    resize: none;
		      
			}
			.fl{
				float: left;
				margin-left:5px;
			}
			.des{
				height: 48px;
			}
			.commit{margin-top: 20px;margin-left:76px;}
			.commit button{
				width: 150px;
			    height: 45px;
			    line-height: 45px;
			    text-align: center;
			    font-size: 15px;
			    color: #fff;
			    background-color: #db7aaa;
			    border-radius: 5px;
			    cursor: pointer;
			    border: 1px solid #db7aaa;
			}
		</style>
	</head>
	<body>
		<div>
			<!--星级-->
			<div id="star"> 
				<span>课程质量:</span>
			    <ul style="width:150px;">  
			       <li><a href="javascript:;">1</a></li>  
			       <li><a href="javascript:;">2</a></li>  
			       <li><a href="javascript:;">3</a></li>  
			       <li><a href="javascript:;">4</a></li>  
			       <li><a href="javascript:;">5</a></li>  
			    </ul> 
			    <!--显示星级内容-->
			    <span id="sGrade"></span>
	  		</div>
	  		<!--描述-->
	  		<div class="des">
	  			<span class="fl">课程评价:</span>
	  			<div class="fl">
	  				<textarea name="" rows="" cols=""></textarea>
	  			</div>
	  		</div>
	  		<!--按钮提交-->
	  		<div class="commit">
	  			<button>提交</button>	
	  		</div>
			
		</div>
   <script>
   		window.onload = function() {
     var oStar = document.getElementById("star");
     var aLi = oStar.getElementsByTagName("li");
     var i = iScore = iStar = 0;
     for (i = 1; i <= aLi.length; i++) {
         aLi[i - 1].index = i;
         //鼠标移过显示分数
         aLi[i - 1].onmouseover = function() {
             fnPoint(this.index);
         };
         //鼠标离开后恢复上次评分
         aLi[i - 1].onmouseout = function() {
             fnPoint();
         };
         //点击后进行评分处理
         aLi[i - 1].onclick = function() {
              iStar = this.index;
              console.info(this.index);
              document.getElementById("sGrade").innerHTML = this.index+".0";
         }
     }
     //评分处理
     function fnPoint(iArg) {
         //分数赋值
         iScore = iArg || iStar;
         for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
     }
};
   	
   	
   </script>
	</body>
</html>
